<template>
	<view class="evaluationManagement">
		<view class="top">
			<text :class="data.obj.hasReply == ''?'active':''"
				@tap="data.obj.hasReply = '',data.obj.pageNo = 1,requstList()">全部</text>
			<text :class="data.obj.hasReply == 'Y'?'active':''"
				@tap="data.obj.hasReply = 'Y',data.obj.pageNo = 1,requstList()">已回复</text>
		</view>
		<scroll-view :refresher-triggered="data.refresherBool" :refresher-enabled="true"
			@refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower" scroll-y="true">
			<view class="list">
				<view class="listItem" v-for="(item,index) in data.result.list" :key="index">
					<view class="top">
						<view class="left">
							<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item.avatarId" mode="aspectFill">
							</image>
						</view>
						<view class="right">
							<view class="name">
								{{item.userName}}
								<text>{{item.createTime}}</text>
							</view>
							<view class="">
								购买：{{item.productDTO.specName}} {{item.productDTO.specValue}}
								<text @tap="handeClick(item)">回复</text>
							</view>
						</view>
					</view>
					<text class="cont">{{item.content}}</text>
					<view class="imgs">
						<view class="" v-for="(item1,index1) in item.attachmentIdList" :key="index1">
							<image @tap="previewImage(item1)" v-if="item1.fileType != '.mp4'"
								:src="data.httpUrl+'/app/file/viewFile?fileId='+item1.id" mode="aspectFill"></image>
							<image v-else
							   
								:src="data.httpUrl+'/app/file/viewFile?fileId='+item1.id+'&process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast'"
								mode="aspectFill"></image>
							<view @tap="previewVideo(item1)" v-if="item1.fileType == '.mp4'">
								<image  src="/static/img/index/131.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
					<view class="goods">
						<view class="left">
							<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item.productDTO.productPicture" mode="aspectFill">
							</image>
						</view>
						<view class="right">
							{{item.productDTO.productName}}
							<text>￥{{item.productDTO.price}}</text>
						</view>
					</view>
					<view class="merchantResponse" v-for="(item1,index1) in item.relies" :key="index1">
						<view class="top">
							<view class="left">
								<image src="/static/img/index/84.png" mode="widthFix"></image>
								商家回复
							</view>
							<text>{{item1.createTime}}</text>
						</view>
						{{item1.replyContent}}
					</view>
				</view>
			</view>
		</scroll-view>
		<PreviewVideo ref="previewVideoc" />
	</view>
</template>

<script setup lang="ts">
	import PreviewVideo from '@/components/previewVideo'
	import { queryReviewsByRefId } from '@/utils/api/shop'
	import { onLoad} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue';
	const previewVideoc = ref()
	const data = reactive<any>({
		obj: { pageNo: 1, pageSize: 10, hasReply: '' },
		result: { list: [] },
		httpUrl: getApp().globalData.baseUrl,
	})
	onLoad(({id})=>{
		if(id){
			data.obj.sonOrderNo = id;
		}
		requstList()
	})
	const getTime = ()=>{
		var currentDate = new Date();
		var year = currentDate.getFullYear();
		var month = currentDate.getMonth() + 1;
		var day = currentDate.getDate();
		var hour = currentDate.getHours();
		var minute = currentDate.getMinutes();
		var second = currentDate.getSeconds();
		return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
	}
	uni.$off('evaluationManagement');
	uni.$on('evaluationManagement',(obj)=>{
		data.result.list.map((item)=>{
			if(item.id == obj.reviewId){
				item.relies.push({createTime:getTime(),replyContent:obj.content})
			}
		})
	})
	const handeClick=(item)=>{
		uni.navigateTo({
			url:'/pages/lifeEvaluate/index?id='+item.id+'&isHf=1'
		})
	}
	const refresherrefresh = () => {
		data.refresherBool = true;
		data.obj.pageNo = 1;
		requstList()
	}
	const previewVideo=(item)=>{
		previewVideoc.value.init(item.id)
	}
	const previewImage = (item) => {
		uni.previewImage({
			current: 1,
			urls: [data.httpUrl + '/app/file/viewFile?fileId=' + item.id],
			loop: true,
		})
	}
	const requstList = () => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		if (data.obj.pageNo == 1) {
			data.result.list = [];
		}
		queryReviewsByRefId({ data: data.obj }).then((res) => {
			res.data.list = [...data.result.list, ...res.data.list];
			data.result = res.data;
			data.refresherBool = false;
			uni.hideLoading()
		})
	}
	const scrolltolower = () => {
		if (data.result.total != data.result.list.length) {
			data.obj.pageNo += 1;
			requstList()
		}
	}
</script>

<style lang="scss">
	.imgs {
		display: flex;
		flex-wrap: wrap;
	
		>view {
			width: 164rpx;
			height: 164rpx;
			margin-right: 15rpx;
			margin-top: 24rpx;
			background: #ccc;
			border-radius: 24rpx;
			position: relative;
			view{
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 7;
				image{
					width: 40rpx;
				}
			}
		
			>image:nth-of-type(1) {
				width: 100%;
				height: 100%;
				border-radius: 24rpx;
			}
		}
	
		view:nth-of-type(4n) {
			margin-right: 0;
		}
	}
	.evaluationManagement {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: #F4F6FA;

		scroll-view {
			flex: 1;
			overflow: auto;
		}

		.list {
			padding-top: 24rpx;

			.listItem {
				margin-bottom: 24rpx;
				padding: 32rpx 24rpx;
				border-radius: 32rpx;
				background: #fff;

				>.top {
					display: flex;
					align-items: center;

					.left {
						width: 96rpx;
						height: 96rpx;
						border-radius: 50%;
						background: #ccc;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.right {
						flex: 1;
						margin-left: 24rpx;

						.name {
							font-size: 32rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							text {
								color: #8C8C8C;
							}

							margin-bottom: 10rpx;
						}
						>view:nth-of-type(2){
							color: #BFBFBF;
							font-size: 24rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							text{
								color: #6B64D3;
							}
						}

					
					}
				}

				>.cont {
					margin: 24rpx 0;
					display: inline-block;
				}

			

				>.goods {
					display: flex;
					align-items: center;
					padding: 16rpx;
					border-radius: 24rpx;
					background-color: #F5F5F5;
					margin: 24rpx 0 0 0;

					.left {
						width: 200rpx;
						height: 200rpx;
						background: #fff;
						border-radius: 24rpx;
						margin-right: 16rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 24rpx;
						}
					}

					.right {
						flex: 1;
						line-height: 1.5;
						display: flex;
						flex-direction: column;
						align-items: flex-end;

						text {
							margin-top: 30rpx;
							font-size: 36rpx;
							color: #FF5233;
						}
					}
				}

				>.merchantResponse {
					padding: 19rpx 16rpx;
					border-radius: 16rpx;
					margin-top: 24rpx;
					background: #F2F1FF;
					font-size: 24rpx;
					color: #8C8C8C;

					.top {
						margin-bottom: 15rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						text {
							color: #8C8C8C;
							font-size: 24rpx;
						}

						.left {
							display: flex;
							align-items: center;
							font-size: 32rpx;

							image {
								width: 42rpx;
								margin-right: 12rpx;
							}
						}
					}
				}
			}
		}

		>.top {
			padding: 11rpx 150rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;

			text {
				color: #595959;
				display: flex;
				flex-direction: column;
				align-items: center;

				&::after {
					content: '';
					display: inline-block;
					width: 40rpx;
					margin-top: 10rpx;
					height: 4rpx;
					border-radius: 4rpx;
				}
			}

			.active {
				color: #6B64D3;

				&::after {
					background: #6B64D3;
				}
			}
		}
	}
</style>